<template>

    <div class="contentPage">
      
       <div class="menu-box contentTop" style="width:100%">
            <div class="row">
                <div class="cel-img">
                    <img v-bind:src="imgMachine" alt="">
                </div>
                <div class="cel">
                    <p style="margin-top: 16px" >{{allMsg.commodityCount|| 0}}</p>
                    <p style="font-size:14px;">机器总数(台)</p>
                </div>
            </div>
            <div class="row">
                <div class="cel-img">
                    <img v-bind:src="imgGuzhang" alt="">
                </div>
                <div class="cel">
                    <p style="margin-top: 16px" v-text="allMsg.breakdownCount || 0"></p>
                    <p style="font-size:14px;">故障机器 (台)</p>
                </div>
            </div>
            <div class="row">
                <div class="cel-img">
                    <img v-bind:src="imgZongshu" alt="">
                </div>
                <div class="cel">
                    <p style="margin-top: 16px" v-text="allMsg.commodityMoneyDay || 0"></p>
                    <p style="font-size:14px;">销售总额(元)</p>
                </div>
            </div>
            <div class="row">
                <div class="cel-img">
                    <img  v-bind:src="imgXiaoshou" alt="">
                </div>
                <div class="cel">
                    <p style="margin-top: 16px" v-text="allMsg.commodityCount || 0"></p>
                    <p style="font-size:14px;">销售次数(次)</p>
                </div>
            </div>
            <div class="row">
                <div class="cel-img">
                    <img v-bind:src="imgTuikuan" alt="">
                </div>
                <div class="cel">
                    <p style="margin-top: 16px" v-text="allMsg.refundMoney || 0"></p>
                    <p style="font-size:14px;">退款金额(元)</p>
                </div>
            </div>
            <div class="row">
                <div class="cel-img">
                    <img v-bind:src="imgCishu" alt="">
                </div>
                <div class="cel">
                    <p style="margin-top: 16px" v-cloak>{{allMsg.refundCount || 0}}</p>
                    <p style="font-size:14px;">退款次数(次)</p>
                </div>
            </div>
        </div>
        <!-- <div style="clear: both;display: block;content:'';"></div> -->
        <div class="contentBottom">
       
            <div id="main">

            </div>
            <div id="tableRow" style="width: 100%;">
                <div class="celTableLeft" style="padding-right: 2%">
                    <div>
                        <p style="display: inline-block;width: 15px;height: 15px;background: #2E8FF3;margin-left:10px;"> </p>
                        <span style="margin-left: 10px;font-size: 14px;font-weight:600">机器销售排行前十</span>
                    </div>
                    <el-table :data="commodityMoney" height="100%" id="sale_box">
                        <el-table-column label="排名" type="index" width='80px'>
                            <template slot-scope="scope">
                              <img v-bind:src="imgOne" style="width: 16px;" v-if='scope.$index==0'>
                              <img v-bind:src="imgTwo" style="width: 16px;" v-if='scope.$index==1'>
                              <img v-bind:src="imgThree" style="width: 16px;" v-if='scope.$index==2'>
                              <span v-if='scope.$index>=3'>{{scope.$index+1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="vendingMachinesCode" label="机器编号"></el-table-column>
                        <el-table-column prop="price" label="销售金额（元）"></el-table-column>
                    </el-table>
                </div>
                <div class="celTableRight">
                    <div>
                        <p style="display: inline-block;width: 15px;height: 15px;background: #7DD324;margin-left:10px;"> </p>
                        <span style="margin-left: 10px;font-size: 14px;font-weight:600">热销商品排行前十</span>
                    </div>
                    <el-table :data="machineMoney" height="100%" id="machine_box">
                        <el-table-column label="排名" type="index" width='80px'>
                            <template slot-scope="scope">
                              <img v-bind:src="imgOne" style="width: 16px;" v-if='scope.$index==0'>
                              <img v-bind:src="imgTwo" style="width: 16px;" v-if='scope.$index==1'>
                              <img v-bind:src="imgThree" style="width: 16px;" v-if='scope.$index==2'>
                              <span v-if='scope.$index>=3'>{{scope.$index+1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="商品名称"></el-table-column>
                        <el-table-column prop="countItem" label="商品销售次数"></el-table-column>
                    </el-table>

                </div>

            </div>

        </div>

    </div>
</template>

<script>


export default {
  name: "dashboard",
  data() {
    return {
      imgMachine: require("../../assets/homeicon/jiqizongshu.png"),
      imgGuzhang: require("../../assets/homeicon/guzhang.png"),
      imgZongshu: require("../../assets//homeicon/zongshu.png"),
      imgXiaoshou: require("../../assets/homeicon/xiaoshou.png"),
      imgTuikuan: require("../../assets/homeicon/tuikuan.png"),
      imgCishu: require("../../assets/homeicon/cishu.png"),
      imgOne: require("../../assets/homeicon/diyi.png"),
      imgTwo: require("../../assets/homeicon/dier.png"),
      imgThree: require("../../assets/homeicon/disan.png"),
      allMsg: {},
      dateList: [],
      priceList: [],
      commodityMoney: [],
      machineMoney: []
    };
  },
  computed: {

  },
  created: function() {
    
    this.getData();
  },

  methods: {
    // 折线图
    getechart: function() {
      var echarts = require("echarts");
      var echarts = require("echarts");

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          formatter: "{b0}（日期）<br />{c0}(元)",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#7dd324"
            }
          }
        },
        grid: {
          left: "4%",
          right: "5%",
          bottom: "2%",
          top: "2%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.dateList
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "金额",
            type: "line",
            smooth: true,
            stack: "总量",
            itemStyle: {
              normal: {
                color: "#7dd324",
                lineStyle: {
                  color: "#7dd324"
                }
              }
            },
            areaStyle: {
              normal: {
                // color:'#c7e3b1'
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c7e3b1"
                  },
                  {
                    offset: 0.5,
                    color: "#cee3ca"
                  },
                  {
                    offset: 1,
                    color: "#e7ebe5"
                  }
                ])
              }
            },
            data: this.priceList
          }
        ]
      });
    },
    getData: function(url) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.$axios
        .get("/ws-microservice-backstage/MarketStatistics/count")
        .then(response => {
          loading.close();
          this.allMsg = response.data.data;
          this.priceList = response.data.data.machineMoneyHebdomad.priceList;
          this.dateList = response.data.data.machineMoneyHebdomad.dateList;
          this.machineMoney = response.data.data.machineMoney;
          this.commodityMoney = response.data.data.commodityMoney;
          if (this.priceList.length == 0 || this.dateList == 0) {
            this.$message("暂无图表数据");
            return;
          }
          this.getechart();
        })
        .catch(function(error) {
          loading.close();
        });
    }
  }
};
</script>


<style scoped>

.menu-box {
  min-width: 1310px;
  box-sizing: border-box;
}

.row {
  display: flex;
  float: left;
  width: 16.6%;
  padding-bottom: 0;
  box-sizing: border-box;
  min-width: 160px;
}


  .cel-img{
    margin-right: 10px;
  }

#main {
  height: 50%;
  width: 100%;
}
#tableRow {
  height: 50%;
  box-sizing: border-box;
}



.el-table__body-wrapper{
  background: #f2f3f4;
}



.contentPage {
  height: 100%;
  width: 100%;
  padding-top: 140px;
  box-sizing: border-box;
  position: relative;
}
.contentTop {
  position: absolute;
  top: 0;
      padding: 20px 0;
}
.contentBottom {
  width: 100%;
  height: 100%;
}

.celTableLeft,
.celTableRight {
  height: 100%;
  min-height: 205px;
  width: 50%;
  position: relative;
  padding: 25px 0;
  float: left;
  box-sizing: border-box;
     background-color: #f2f3f4;
}
</style>
